<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login</title>

    <link rel="stylesheet" href="__ADMIN__/css/login.css">
    <link rel="stylesheet" href="__STATIC__/font-awesome/css/font-awesome.css">

    <script src="__STATIC__/jq/jquery-3.4.1.js"></script>
    <script src="__STATIC__/layer/layer.js"></script>
</head>
<body>
    <div id="loginForm">
        <div class="user">
            <i class="fa fa-user"></i>
        </div>
        <form action="" method="post" autocomplete="off">
            <div class="input">
                <i class="fa fa-user"></i>
                <input name="username" id="loginName" type="text" placeholder="用户名">
            </div>
            <div class="input">
                <i class="fa fa-keyboard-o"></i>
                <input name="password" id="loginPwd" type="password" placeholder="密码">
            </div>

            {if $login_captcha == 1}
            <div class="input">
                <i class="fa fa-bullseye"></i>
                <input name="captcha" id="captcha" type="text" placeholder="验证码">
                <div class="captcha">
                    <img id="captchaImg" src="{:url('admin/login/captchaCode')}" onclick="this.src='{:url(\"admin/login/captchaCode\")}'" alt="验证码" title="点击刷新验证码">
                </div>
            </div>
            {/if}
            <button id="doLogin" class="login-button" type="button">Login</button>
        </form>
    </div>
</body>
<script>
    $('#doLogin').on('click',function () {
        let username = $('#loginName').val()
        let password = $('#loginPwd').val()
        let captcha = $('#captcha').val()

        if (emptyCheck(username)) {
            $("#loginName").focus();
            layer.msg('用户名不能为空');
            return false;
        } else if (emptyCheck(password)) {
            $("#loginPwd").focus();
            layer.msg('密码不能为空');
            $("#password").focus();
            return false;
        } else if ("{$login_captcha}" == 1 && emptyCheck(captcha)) {
            $("#captcha").focus();
            layer.msg('请输入验证码');
            $("#captcha").focus();
            return false;
        }

        let data = {
            username: username,
            password: password,
            captcha: captcha
        }

        ajaxRequest("{:url('Login/doLogin')}", data, function (res) {
            if (res.code == 1) {
                layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                    location.href = res.url;
                })

            } else if (res.code == 2) {
                $("#captchaImg").click();
                layer.msg(res.msg, {icon: 2});
            } else {
                $("#captchaImg").click();
                layer.msg(res.msg, {icon: 2});
            }
        })

    })

    function emptyCheck(value){
        if (value == '' || value == null || value == 'undefined') {
            return true
        }
        return false
    }

    function ajaxRequest(url,data,success_callback,error_callback,type="POST") {
        if (error_callback == null || error_callback == '' || error_callback == 'undefined'){
            error_callback = function () {
                layer.msg('系统繁忙，请重试',{icon:icoHint,time:msgShowTime})
            }
        }
        return $.ajax({
            type:type,
            url:url,
            data:data,
            dataType:"JSON",
            success:success_callback,
            error:error_callback
        });
    }

    $(document).keyup(function (event) {
        if (event.keyCode == 13) {
            $("#doLogin").click()
        }
    })
</script>
</html>